<!-- 添加非油品商品列表弹框 -->
<template>
  <el-dialog
    title="添加商品"
    :visible.sync="dialogFormVisible"
    :before-close="handleClose"
    width="50%"
  >
    <el-form
      ref="refGoods"
      :model="formGoods"
      label-width="80px"
      size="small"
      :inline="true"
    >
      <el-form-item label="商品名称" prop="commodityName">
        <el-input
          :clearable="true"
          v-model="formGoods.commodityName"
          placeholder="请输入商品名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="商品条码" prop="barCode">
        <el-input
          :clearable="true"
          v-model="formGoods.barCode"
          placeholder="请输入商品条码"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" style="margin-left: 20px" @click="getList"
          >搜索</el-button
        >
        <el-button @click="productReset">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table
      :data="commodityList"
      v-loading="loading"
      border
      max-height="333"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column
        property="commodityName"
        label="商品名称"
      ></el-table-column>
      <el-table-column property="barCode" label="商品条码"></el-table-column>
      <el-table-column property="categoryName" label="分类"></el-table-column>
      <el-table-column
        property="salePrice"
        label="售价（元）"
      ></el-table-column>
      <el-table-column property="inventory" label="库存"></el-table-column>
    </el-table>

    <!-- 分页 -->
    <pagination
      :total="total"
      :page.sync="formGoods.pageNum"
      :limit.sync="formGoods.pageSize"
      @pagination="getList"
    />
    <div slot="footer" class="div-button">
      <el-button
        size="medium"
        round
        style="margin-right: 50px"
        @click="handleClose"
        >取 消</el-button
      >
      <el-button type="primary" size="medium" round @click="goodsVerify"
        >确 定</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
import { cloneDeep } from "lodash";
import { getCommodityListApi } from "@/api/nonOil/goods";
export default {
  name: "NonOilGoods_Add",
  props: {
    dialogFormVisible: {
      type: Boolean,
      default: false,
    },

    stationId: {
      type: [String, Number],
      default: null,
    },

    nonOilIdLists: {
      default: () => [],
    },
  },
  data() {
    return {
      // 已经选择的非油商品列表
      activityCommodityRulesList: [],

      // 添加商品
      commodityList: [],
      total: 0,
      loading: false,
      formGoods: {
        pageNum: 1,
        pageSize: 10,
        enterpriseId: null,
        stationId: null,
        commodityName: null,
        barCode: null,
        commodityIdList: [],
      },
      // 添加商品多选列表
      multipleSelection: [],
    };
  },

  methods: {
    // 获取添加商品列表
    getList() {
      this.loading = true;

      const oilIdLists = [];
      cloneDeep(this.activityCommodityRulesList).forEach((item) => {
        if (item.commodityId) return oilIdLists.push(item);
      });

      const commodityIdList = oilIdLists.map((item) => {
        return item.commodityId;
      });
      this.formGoods.commodityIdList = commodityIdList;
      getCommodityListApi({
        ...this.formGoods,
        stationId: this.stationId,
      })
        .then((res) => {
          this.total = res.total;
          this.commodityList = res.rows;
          this.loading = false;
        })
        .catch(() => {
          this.total = 0;
          this.commodityList = [];
          this.loading = false;
        });
    },

    // 添加商品重置
    productReset() {
      this.$refs.refGoods.resetFields();
      this.getList();
    },

    // 添加商品多选
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    // 添加商品确认
    goodsVerify() {
      this.$emit("getOilIdLists", this.multipleSelection);
      this.handleClose();
    },

    // 添加商品取消提出弹框
    handleClose() {
      this.multipleSelection = [];
      this.formGoods = {
        pageNum: 1,
        pageSize: 10,
        enterpriseId: null,
        stationId: null,
        commodityName: null,
        barCode: null,
        commodityIdList: [],
      };
      this.$emit("update:dialogFormVisible", false);
    },
  },

  computed: {},

  watch: {
    dialogFormVisible: {
      deep: true, // 深度监听
      handler(newVal, oldVal) {
        if (newVal) {
          this.activityCommodityRulesList = this.nonOilIdLists;
          this.getList();
        } else {
        }
      },
    },
  },
};
</script>

<style lang="scss" scoped>
.div-button {
  width: 100%;
  text-align: center;
}
</style>
